{% extends "layout.tpl" %}

{% block title %}{% endblock %}

{% block nav %}
	{% import 'nav.tpl' as nav %}
	{{nav.active('study')}}
{% endblock %}

{% block subpage %} class="g-html"{% endblock %}

{% block content %}
	<div class="g-main f-fr">
		<div class="mainbox">
			<h1 class="e-pt20 e-pb20 f-fs28">介绍</h1>
			<h2 class="e-pt20 f-fs22 f-bb e-pb10" id="Nui是什么">Nui是什么</h2>
			<div class="e-mt15 f-lh22">
				<p>Nui是由诺诺网前端团队开发的基于jQuery模块化UI框架，主要由加载器、实用工具、模版引擎、代理事件、组件五个核心模块构成，使用时能够自动管理模块之间的依赖关系，让编码方式更加简单、自然、规范，使开发者更为专心的享受编码的乐趣！</p>
			</div>
			<h3 class="e-mt20 f-fs16"><b class="f-corange">#</b> 兼容性</h3>
			<div class="e-mt15 f-lh22">
				<p>Internet Explorer 6+ <b class="f-cgreen f-fs16">✔</b></p>
				<p>Firefox 2+ <b class="f-cgreen f-fs16">✔</b></p>
				<p>Safari 3.2+ <b class="f-cgreen f-fs16">✔</b></p>
				<p>Chrome 3+ <b class="f-cgreen f-fs16">✔</b></p>
				<p>Opera 10+ <b class="f-cgreen f-fs16">✔</b></p>
				<p>移动端 <b class="f-cgreen f-fs16">✔</b></p>
			</div>
			<h2 class="e-pt20 f-fs22 f-bb e-pb10" id="快速上手">快速上手</h2>
			<h3 class="e-mt20 f-fs16"><b class="f-corange">#</b> 下载</h3>
			<div class="e-mt15 f-lh22">
				<p>
					<a href="/nui/src/nui.js" class="f-corange f-tdu">未压缩版</a> 
					<a href="/nui/src/nui-min.js" class="f-corange f-tdu e-ml10">压缩版</a>
				</p>
			</div>
			<h3 class="e-mt20 f-fs16"><b class="f-corange">#</b> 引入</h3>
			<div class="e-mt15 f-lh22">
				<p>下载任意版本放到项目中并用script标签引入，Nui会被注册为一个全局变量。</p>
				<p>如果要使用Nui组件，在引入Nui之前需先引入jQuery，使用版本需1.8以及以上版本。</p>
			</div>
<script type="text/highlight" data-xml-options>
&lt;script src="/nui/assets/jquery.js"&gt;&lt;/script&gt;
&lt;script src="/nui/src/nui.js"&gt;&lt;/script&gt;
</script>
			<h3 class="e-mt20 f-fs16"><b class="f-corange">#</b> 编写模块</h3>
<script type="text/highlight" data-javascript-options>
// page.js
Nui.define(['./hello'], function(hello){
	var hello2 = this.require('./hello2');
	return ({
		init:function(){
			console.log(hello())
			console.log(hello2())
		}
	})
})

// hello.js hello2.js
Nui.define(function(){
    return function(){
        return 'Hello World!'
    }
})
</script>
			<h3 class="e-mt20 f-fs16"><b class="f-corange">#</b> 入口模块调用</h3>
<script type="text/highlight" data-xml-options>
&lt;script type="text/javascript"&gt;
Nui.load('./page', function(page){
	page.init()
})
&lt;/script&gt;
</script>
		</div>
	</div>
	{% import 'sidecol.tpl' as side %}
	{{side.active('index')}}
{% endblock %}
